<template>
  <div class="desktop-viewer-head">
    <LogoPanel class="logo"></LogoPanel>
    <MainTabs
      class="tab"
      :model-value="modelValue"
      :options="tabOptions"
      @update:model-value="(v) => $emit('update:modelValue', v)"
    ></MainTabs>
  </div>
</template>

<script setup>
import LogoPanel from '@/components/cards/LogoPanel.vue'
import MainTabs from '@/components/tabs/MainTabs.vue'

defineProps({
  modelValue: {
    type: [String, Number],
    required: true,
  },
  tabOptions: {
    type: Array,
    required: true,
  },
})

defineEmits(['update:modelValue'])
</script>

<style lang="scss" scoped>
.desktop-viewer-head {
  width: 100%;
  height: 4.8125rem;
  margin: 0;
  position: relative;

  .logo {
    position: absolute;
    top: 1.25rem;
    left: 1.25rem;
  }

  .tab {
    position: absolute;
    top: 0.75rem;
    left: 50%;
    transform: translateX(-50%);
  }
}
</style>
